<template>
  <f7-page>
    <f7-navbar title="货源行情">
      <f7-nav-right>
        <f7-link href="/pass/passAdd/" icon-f7="add" color="white"></f7-link>
      </f7-nav-right>
    </f7-navbar>
    <f7-toolbar>
      <tab isActive="true"/>
    </f7-toolbar>

    <f7-block>货源方将在
      <span>【中钢云】</span>
      <span>【贸易中心】</span>为您指派货源！
    </f7-block>
    <f7-swiper>
      <f7-swiper-slide>
        <h6>e-WCA.com</h6>
        <h1>运输中心·货源</h1>
        <h6>物流天下</h6>
      </f7-swiper-slide>
    </f7-swiper>
    <div class="">
      <vue-scroll :ops="ops" style="overflow: hidden; height: auto;">
        <ul class="row-scroll">
          <li v-for="item,index in verifyCompany" :class="{'active':item.switch}"
              @click="verifyCompanyClick(index,item)">
                        <span class="img-circle img-size1" v-if="item._id!='huoyuanquan' && item._id!='shangyezhineng'">
                              <img width="100%" height="100%" :src="item.url_logo" alt=""/>
                        </span>
                        <span class="img-circle img-size1" v-if="item._id=='huoyuanquan' || item._id=='shangyezhineng'">
                           <f7-icon f7="circle" class="lightbulb"></f7-icon>
                        </span>
            <h6>{{item.nick_name}}</h6>
          </li>
        </ul>
      </vue-scroll>
    </div>

    <f7-block-title class="nav_title" hidden>
      <f7-icon f7="volume_fill" class="The_horn"></f7-icon>
      <b>1个货源方申请好友，添加查看货源行情</b>
      <f7-icon f7="right" color="gray"></f7-icon>
    </f7-block-title>

    <div class="">
      <vue-scroll :ops="ops" style="overflow: hidden; height: auto;">
        <ul class="row-scroll row_ul">
          <li v-for="item,index in statusType" @click="statusTypeClick(item,index)">
            <a :class="{'actived':item.switch}">{{item.chn}}{{item.num}}</a>
          </li>
        </ul>
      </vue-scroll>
    </div>

    <f7-block-title class="text-align-center" hidden>
      <span>按线路筛选</span>
      <span class="text-purple">| 筛选 <img src="../../assets/img/icon-filter.png" class="icon-filter"></span>
    </f7-block-title>

    <noData v-if="passGuideData.count==0"></noData>

    <template v-for="item in passGuideData.lists" v-if="passGuideData.count>0">
      <f7-link @click="$f7router.navigate('/trade/demandDtl/'+item[idtype]+'/'+passGuideParam.step)" v-if="passGuideParam.step=='traffic_demand' || passGuideParam.step=='traffic_plan'">
        <list :data="item" :tepType="passGuideParam.step"></list>
      </f7-link>
      <f7-link @click="$f7router.navigate('/trade/orderDtl/'+item._id+'/'+passGuideParam.step)" v-else>
        <list :data="item" :tepType="passGuideParam.step"></list>
      </f7-link>
    </template>

  </f7-page>
</template>

<script>
    import tab from '../../components/tab.vue'
    import Vue from 'vue'
    import vuescroll from 'vuescroll'
    // 注意： 从4.6.6开始， 你需要引入 .css 文件了
    import 'vuescroll/dist/vuescroll.css'
    import F7Link from 'framework7-vue/src/components/link'
    import common from '../../utils/common.js'
    import list from '../../components/tradeList.vue'
    import noData from '../../components/noData.vue'
    Vue.use(vuescroll)
    export default {
        name: 'trade',
        data: function () {
            return {
                idtype:'_id',
                ops: {
                    vuescroll: {
                        snapping: {
                            enable: false,
                            width: 100,
                            height: 100
                        },
                        mode: 'slide'
                    },
                    scrollPanel: {
                        scrollingY: false // or scrollingX: false
                    },
                    rail: {
                        background: '#01a99a',
                        opacity: 0,
                        /** Rail's size(Height/Width) , default -> 6px */
                        size: '0'
                    }
                },
                verifyCompany: [],
                statusType: [
                    {eng: 'traffic_demand', chn: '新货源', switch: true, num: 0},
                    {eng: 'traffic_plan', chn: '已参与', switch: false, num: 0},
                    {eng: 'order_3', chn: '待找车', switch: false, num: 0},
                    {eng: 'order_effective', chn: '进行中', switch: false, num: 0},
                    {eng: 'order_complete', chn: '已完成', switch: false, num: 0}
                ],
                passGuideData: {
                    lists: []
                },
                passGuideParam: {
                    line_id: [],
                    page: 1,
                    scene: 'friend',
                    step: 'traffic_demand',
                    verify: []
                }
            }
        },
        components: {
            F7Link,
            tab: tab,
            list: list,
            noData: noData
        },
        methods: {
            // 获取公司列表
            async getVerifyCompany () {
                let param = {
                    getType: 1,
                    page: 1,
                    subType: 'PURCHASE',
                    type: 'TRADE'
                }
                let getVerifyCompanyRes = await this.AccountService.getVerifyCompany(param)
                this.verifyCompany = getVerifyCompanyRes.data.data.company
                this.verifyCompany.unshift({
                    nick_name: '货源圈',
                    _id: 'huoyuanquan'
                })
                // this.verifyCompany.unshift({
                //   nick_name: '商业智能',
                //   _id: 'shangyezhineng'
                // })
                common.addAttrSwitch(this.verifyCompany)
                this.verifyCompany[0].switch = true
            },
            // 获取状态相关信息
            async passGuide (step) {
                let passGuideRes = await this.LineService.passGuide(this.passGuideParam)
                this.passGuideData = passGuideRes.data.data
                this.statusType.forEach((item) => {
                    switch (item.eng) {
                        case 'traffic_demand':
                            item.num = this.passGuideData.traffic_demand
                            break
                        case 'traffic_plan':
                            item.num = this.passGuideData.traffic_plan
                            break
                        case 'order_3':
                            item.num = this.passGuideData.order_3
                            break
                        case 'order_effective':
                            item.num = this.passGuideData.order_effective
                            break
                        case 'order_complete':
                            item.num = this.passGuideData.order_complete
                            break
                    }
                })
            },
            // 认证公司点击
            verifyCompanyClick (index, item) {
                common.addAttrSwitch(this.verifyCompany)
                item.switch = true
                this.$set(this.verifyCompany, index, item)
                if (item._id === 'huoyuanquan' || item._id === 'shangyezhineng') {
                    this.passGuideParam.verify = []
                } else {
                    this.passGuideParam.verify[0] = item._id
                }
                this.passGuide()
            },
            // 状态点击
            statusTypeClick (item, index) {
                if(item.eng=='traffic_demand'){
                    this.idtype='_id'
                }else{
                    this.idtype='demand_id'
                }

                common.addAttrSwitch(this.statusType)
                item.switch = true
                this.$set(this.statusType, index, item)
                this.passGuideParam.step = item.eng
                this.passGuide()
            }
        },
        mounted () {

            this.getVerifyCompany()
            this.passGuide()
        }
    }
</script>

<style scoped>
  .row-scroll {
    overflow: hidden;
    min-width: 700px;
    padding: 10px 10px 3px 10px;
    overflow-x: hidden;
    margin: 0;
  }

  .row-scroll li {
    float: left;
    text-align: center;
    list-style: none;
    padding-right: 10px;
  }

  .row_ul li {
    margin-right: 20px;
  }

  .row-scroll li span {
    display: inline-block;
    background: #f4f4f4;
    border: 1px solid #ccc;
    margin-bottom: 12px;
    color: #999;
    line-height: 44px;
  }

  .row-scroll li a {
    background: #f0f0f0;
    padding: 5px 10px;
    border-radius: 20px;
    color: #999;
  }

  .row-scroll li .actived {
    color: #fff;
    background-image: linear-gradient(90deg, #94a8fb 0%, #6a82e8 100%);
  }

  .img-size1 {
    width: 48px;
    height: 48px;
    box-sizing: border-box;
  }

  .img-circle {
    border-radius: 100%;
    background: #f0f0f0;
  }

  .img-circle img {
    border-radius: 100%;
  }

  .row-scroll span i.h6 {
    margin-top: 10px;
    display: inline-block;
    line-height: 15px;
    width: 25px;
    color: #999;
    font-size: 11px;
    font-style: normal;
  }

  .row-scroll h6 {
    width: 65px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 3px;
    font-weight: initial;
    color: #999;
    margin: 0;
  }

  .text-gray {
    color: #999 !important;
    display: inline !important;
  }

  .active span {
    border-color: #ff8645 !important;
    color: #ff8645 !important;
    background: #fff2e8 !important;
  }

  .active h6 {
    color: #ff8645 !important;
    font-size: 11px;
    font-weight: initial;
  }

  .lightbulb {
    font-size: 20px;
  }

  .ios .Time {
    background: #f5f5f5 !important;
    color: #666 !important;
  }

  .ios .page {
    background: #f5f5f5;
  }

  .ios a {
    color: #333;
    display: inline-block;
    width: 100%;
  }

  .ios .block {
    margin: 0;
    color: #6d6d72;
    text-align: center;
    background: #fff;
    height: 44px;
    line-height: 44px;
    color: #333;
    font-size: 12px;
    font-weight: normal;
  }

  .swiper-container {
    position: relative;
    overflow: hidden;
    padding: 0;
    z-index: 1;
    margin: 0px 10px 3px 10px;
    background: url('../../assets/img/banner.png') no-repeat center center;
    background-size: cover;
    border-radius: 5px;
    justify-content: center;
    flex-direction: column;
    text-align: center;
  }

  .swiper-slide h6 {
    margin: 0px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    padding: 7px 0px 5px 0px;
  }

  .swiper-slide h1 {
    font-size: 24px;
    color: #fff;
    font-weight: 400;
    margin: 0;
  }

  .row {
    margin: 10px;
  }

  .nav_title {
    margin: 10px 10px 0px 10px !important;
    border-radius: 6px;
    padding: 8px 0;
    background: #ffffff;
    padding-left: 15px;
    text-align: left !important;
  }

  .ios .icon.The_horn {
    color: #9898e7;
    font-size: 20px;
    margin-right: 10px;
  }

  .nav_title b {
    color: #9898e7;
    font-size: 12px;
  }

  .ios .icon.color-gray {
    color: #8e8e93;
    font-size: 20px;
    float: right;
    margin-right: 10px;
  }

  .ios .block-title {
    color: #333;
    margin: 0;
    line-height: 20px;
    padding-top: 10px;
  }

  .text-purple {
    color: #a2a2f0;
    margin-left: 3px;
    font-size: 12px;
  }

  .icon-filter {
    width: 11px;
    height: 11px;
  }

  .col {
    margin-top: 70px;
  }

  .gap-100 {
    margin-top: 100px;
  }

  .clearfix {
    clear: both;
  }

  .text-grag {
    color: #999 !important;
    font-size: 14px;
  }
</style>
